Building Interactive UX Maps 案例整理：構建互動式UX地圖的步驟

工具：使用Figma進行示例，展示如何構建高保真、互動式的使用者體驗（UX）地圖。

場景：展示使用者研究的結果，例如使用者的行為、引用和影片證據，透過地圖互動讓利益相關者更深入瞭解使用者體驗。

步驟 1：彙總資料並製作低保真地圖

• 收集使用者擔憂新軟體負擔能力的反饋。

• 操作：在低保真地圖中將調查結果與相關證據（如使用者引述或影片連結）逐一關聯。例如：
  • 調查結果：“使用者擔心能否負擔得起新軟體。”
  • 證據連結：關聯到特定使用者的訪談影片或報價內容。

步驟 2：建立視覺設計系統

• 目標：建立設計一致的地圖，包括排版、顏色、圖示等核心元素。

• 示例操作：在Figma中設定文字樣式、顏色樣式和元件庫。例如：
  • 使用品牌色調定義地圖主題。
  • 建立互動按鈕的多種狀態（如“正常”、“懸停”、“點選”）。

步驟 3：分組和整理內容

• 將使用者調查中的證據（如圖片、影片和引用）按類別分組。

• 在Figma中使用“Section工具”對相關內容進行歸類，例如：
  • 照片：使用者研究中的圖片證據。
  • 影片：使用者的錄音片段。
  • 引用：與具體調查結果對應的使用者語句。

步驟 4：使用自動佈局建立地圖結構

• 建立包含標題、游泳道和象限的框架。

• 使用自動佈局實現靈活調整，例如：
  • “摺疊部分”的內容擴充套件不會覆蓋下方文字，而是將其自動推至更低位置。

步驟 5：新增實際內容

• 操作場景：
  • 替換“寫下一個主題”這種佔位文字為實際的調查結果。
  • 使用“Swap Instance”功能快速更新圖示。

• 示例：
  • 替換佔位文字為“使用者定義新計劃引數時遇到問題”。
  • 替換隨機圖示為調查中描述的具體功能按鈕。

步驟 6：建立互動原型

• 點選某主題時彈出使用者證據（如影片或引用）。

• 使用Figma的“Prototype模式”連線互動：
  • 選擇需要互動的元素。
  • 定義互動型別（如“點選後顯示疊加層”）。
  • 設定互動目標（如跳轉到相關證據頁面）。

步驟 7：測試與調整

• 操作場景：
  • 與團隊成員測試互動功能是否正常。
  • 使用Figma的註釋功能記錄需要修改的部分。

• 示例反饋：
  • 在測試中發現某疊加層未正確命名，返回元件庫檢查命名並修復。

步驟 8：建立模板

• 目標：提高後續地圖製作效率。

• 示例操作：
  • 從首次製作的地圖中移除內容，僅保留框架結構。
  • 新增互動原型說明，以便團隊成員瞭解模板的用法和限制。